//About page..
@import "./common.scss";
$ac: #467df6;
@mixin ctr {
  width: 75%;
  margin: auto;
}

main {
  .banner {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    height: 360px;
    background-image: url('../img/about.webp');
  }

  .company-tabs {
    margin: 60px 0 0;
    .tablist {
      @include ctr;
      li > a {
        font-size: $font-size-xlg;
        margin-bottom: 0;
        display: block;
        padding: 20px 30px;
        &.active {
          color:$ac;
        }
      }

    }
    .tab-content {
      padding: 40px 0;
      #company-intro {
        .intro-wrapper {
          > .row, blockquote {
            @include ctr;
          }
          blockquote {
            p {font-size: $font-size-normal;}
          }
          .col {
            margin: 40px 0;
            .title {
              margin-bottom: 20px;
              span.big {
                font-size: 40px;
                font-weight: bolder;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                color:$ac;
                margin-right: 10px;
              }
            }
            .desc {
              width: 75%;
              font-size: $font-size-normal;
            }
          }
          .values {

            .row {
              @include ctr;
              figure {
                height: 325px;
                .figure-img {
                  margin-bottom: 30px;
                }
                .figure-caption {
                  > h5 {
                    margin-bottom: 20px;
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
      }
      #path {
        .course {
          position: relative;
          @include ctr;
          ul.list {
            padding-left: 0;
            li {
              margin-bottom: 2.0625rem;

              .label {
                width: 90px;
                height: 34px;
                background-color: $ac;
                color:white;
                display: flex;
                position: relative;
                justify-content: center;
                align-items:center;
                border-radius: 4px;
                text-align: center;
                font-size: $font-size-lg;
                svg {
                 position: absolute;
                 right: -10px;
                 color: $ac;
                }
              }
              .circle {
                width: 10px;
                height: 10px;
                background-color:$ac;
                border-radius: 100%;
                margin:0 30px;
                z-index: 9;
              }
              .content {
                color: rgba(0,0,0,0.65);
              }
            }
          }
          .line {
            position: absolute;
            top: 0;
            width: .125rem;
            height: 100%;
            background-color: #eee;
            left: 124px;
          }
        }
      }
      #honor {
        @include ctr;
        .timeline {
          ul {
            list-style: none;
            li{
              display: flex;
              &:nth-child(even) {
                justify-content: flex-end;
                .circle{
                  transform: translateX(50%);
                }
                .link-line, .label {
                  transform: translateX(10px);
                }
              }
              &:nth-child(odd) {
                .circle {
                  transform: translateX(-50%);
                }
                .link-line, .label {
                  transform: translateX(-10px);
                }
              }
              .box {
                display: flex;
                width: 50%;
                align-items: center;
                .content {
                  width: 75%;
                }
                .circle {
                  width: 1.25rem;
                  height: 1.25rem;
                  border-radius: 1.25rem;
                  background: rgba(70,125,246,.09);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  .inner {
                    width: .625rem;
                    height: .625rem;
                    border-radius: .625rem;
                    background: #467df6;
                  }
                }
                .link-line {
                  width: 6.25rem;
                  height: .0625rem;
                  background: #467df6;
                }
                .label {
                  background: rgba(70,125,246,.09);
                  border-radius: 6.25rem;
                  color: #fff;
                  height: 34px;
                  width: 86px;
                  text-align: center;
                  font-size: 1.125rem;
                  z-index: 2;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  .inner {
                    width: 4.1875rem;
                    height: 1.625rem;
                    line-height: 1.625rem;
                    background: #467df6;
                    font-size: 14px;
                    border-radius: 6.25rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  main {
    .company-tabs {
      .tablist {

      }
      .tab-content {
        #company-intro{}
        #path {
          .course {
            ul.list {
              li {
                .label,.circle  {
                  flex: none;
                }
              }
            }
          }
        }
        #honor {}
      }
    }
  }
}

@media (max-width: 576px) {
  main {
    .company-tabs {
      .tablist {
        flex-wrap: nowrap;
      }
      .tab-content {
        #company-intro{
          .intro-wrapper {
            .col {
              margin: 20px 0;
              .desc {
                width: auto;
              }
            }
          }
        }
        #path {
          .course {
            ul.list {
              li {
                .label {
                  span {white-space: nowrap}
                }
              }
            }
          }
        }
        #honor {
          .timeline {
            ul {
              li {
                .box {width: auto;}
                margin: 1em 0;
              }
            }
          }
        }
      }
    }
  }
}
